<template>
	<view class="team-info-item">
		<view class="top flex-between">
			<view class="d-flex">
				<u-image width="80rpx" height="80rpx" radius="10rpx" :src="data.team_logo"></u-image>
				
				<view style="margin-left: 30rpx;">
					<view class="name">{{ data.team_name }}</view>
					<view class="tags d-flex flex-wrap">
						<view
							v-for="(item, index) in data.tag"
							:key="item"
							class="tag"
						>
							<u-tag
								:text="item"
								:bgColor="tagColor[index % tagColor.length]"
								size="mini"
								borderColor="rgba(0,0,0,0)"
							/>
						</view>
					</view>
				</view>
			</view>
			
			<slot name="right"></slot>	
		</view>
		
		<u-line color="#F3F3F3" customStyle="margin: 30rpx 0;"></u-line>
		
		<view class="description ellipsis-2">
			<slot name="description">{{ data.team_info }}</slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			tagColor: ['#ff8f05', '#9cb5ff'],
		}
	},
}
</script>

<style lang="scss" scoped>
team-info-item + team-info-item .team-info-item {
	margin-top: 30rpx;
}

.team-info-item {
	padding: 30rpx;
	border-radius: 20rpx;
	background-color: #fff;
	box-shadow: 0px 6rpx 19rpx 1px rgba(0, 0, 0, 0.06);
	
	& + .team-info-item {
		margin-top: 30rpx;
	}
	
	.name {
		font-size: 30rpx;
	}
	
	.tags {
		margin-top: 14rpx;
		margin-left: -20rpx;
		
		.tag {
			margin-left: 20rpx;
		}
	}
	
	.description {
		font-size: 24rpx;
	}
}
</style>